<template>
  <view :class="s.index">
    <at-search-bar></at-search-bar>
    <view v-for="(item, index) in searchItem" :key="index">
      <search-item 
       :imgSrc="img" :id="item.id"
       :title="item.title" :content="item.content" 
       :dianzanNum="item.goodNum" :guankanNum="item.seeNum"></search-item>
    </view>
  </view>
</template>

<script lang="ts">
import { AtSearchBar } from "taro-ui-vue3";
import searchItem from "@/components/searchItem/searchItem.vue";
import { onBeforeMount, reactive, toRefs } from "vue";
import Taro from "@tarojs/taro"
interface searchItem {
  searchItem: object[];
}
export default {
  name: "Index",
  components: {
    AtSearchBar,
    searchItem,
  },
  setup() {
    let indexItem = reactive<searchItem>({
      searchItem: [],
    });
    const img = Taro.getStorageSync("userInfo").avatar
    onBeforeMount(()=>{
      getBlogList()
    })
    async function getBlogList():Promise<void>{
      let config = {
        url:"https://www.ttzxh.icu:443/api/blog/allList"
      }
      let data = await Taro.request(config)
      indexItem.searchItem.push(...data.data.data)
    }
    return {
      ...toRefs(indexItem),
      img,
    };
  },
};
</script>

<style lang="scss" module="s">
@import url("./index.scss");

</style>

